<style>
    .action-row {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .action-row navigator {
        color: #007aff;
        padding: 0 20px;
    }

    .oauth-row {
        display: flex;
        flex-direction: row;
        justify-content: center;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }

    .oauth-image {
        width: 100px;
        height: 100px;
        border: 1px solid #dddddd;
        border-radius: 100px;
        margin: 0 40px;
        background-color: #ffffff;
    }

    .oauth-image image {
        width: 60px;
        height: 60px;
        margin: 20px;
    }
	.input-group .input-row{
		padding: 14upx 0;
		font-size: 30upx;
	}
</style>
<template>
    <view class="content">
        <view class="input-group">
            <view class="input-row border">
                <text class="title">手机号：</text>
                <input type="text" v-model="account" @input="inputTel" placeholder="请输入手机号">
            </view>
            <view class="input-row">
                <text class="title">密码：</text>
                <input type="text" password="true" v-model="password" @input="inputPwd" placeholder="请输入密码">
            </view>
        </view>
        <view class="btn-row">
            <button type="primary" class="primary" @tap="bindLogin">登录</button>
        </view>
        <view class="action-row">
            <navigator url="../reg/reg">注册账号</navigator>
			<text>|</text>
			<navigator url="../findpwd/findpwd">忘记密码</navigator>
            <!-- <text>|</text>
            <navigator url="../pwd/pwd">忘记密码</navigator> -->
        </view>
        <!-- <view class="oauth-row" v-if="hasProvider" v-bind:style="{top: positionTop + 'px'}">
            <view class="oauth-image" v-for="provider in providerList" :key="provider.value">
                <image :src="provider.image" @tap="oauth(provider.value)"></image>
            </view>
        </view> -->
    </view>
</template>

<script>
    import service from '../../service.js';
    import {
        mapState,
        mapMutations
    } from 'vuex'

    export default {
        data() {
            return {
                providerList: [],
                hasProvider: false,
                account: '',
                password: '',
                positionTop: 0
            }
        },
        computed: mapState(['forcedLogin','loginUrl']),
        methods: {
            ...mapMutations(['login','setUid','setPoint','setInfo','setLevel','setAddress']),
            initProvider() {
                const filters = ['weixin', 'qq', 'sinaweibo'];
                uni.getProvider({
                    service: 'oauth',
                    success: (res) => {
                        if (res.provider && res.provider.length) {
                            for (let i = 0; i < res.provider.length; i++) {
                                if (~filters.indexOf(res.provider[i])) {
                                    this.providerList.push({
                                        value: res.provider[i],
                                        image: '../../static/img/' + res.provider[i] + '.png'
                                    });
                                }
                            }
                            this.hasProvider = true;
                        }
                    },
                    fail: (err) => {
                        console.error('获取服务供应商失败：' + JSON.stringify(err));
                    }
                });
            },
            initPosition() {
                /**
                 * 使用 absolute 定位，并且设置 bottom 值进行定位。软键盘弹出时，底部会因为窗口变化而被顶上来。
                 * 反向使用 top 进行定位，可以避免此问题。
                 */
                this.positionTop = uni.getSystemInfoSync().windowHeight - 100;
            },
			inputTel(event){
				this.account = event.target.value;
			},
			inputPwd(event){
				this.password = event.target.value;
			},
            bindLogin() {
// 			   if(!this.account){
// 				   uni.showToast({
// 					title:'请填写账号',
// 				   	icon:'none',
// 					mask:true
// 				   })
// 				   return
// 			   }
// 			   if(!this.password){
// 					uni.showToast({
// 					title:'请填写密码',
// 					icon:'none',
// 					mask:true
// 					})
// 					return
// 			   }
			   let that = this
			   uni.request({
				   url:this.loginUrl+'login/appLogin',
				   method:'POST',
				   data:{
					   name:that.account,
					   passwd:that.password
				   },
				   header: {
						'content-type': 'application/x-www-form-urlencoded' 
					},
				   success: (res) => {
						console.log(res)
						if(res.data.code == 1){
							uni.showToast({
								title:'登陆成功',
								icon:'none',
								mask:true
							})
							that.setUid(res.data.data.uid)
							that.setPoint(res.data.data.point)
							that.setInfo('')
							that.setInfo(that.account)
							that.setLevel(res.data.data.level)
							that.setAddress(res.data.data.address)
							uni.setStorageSync('uid', res.data.data.uid);
							if(that.logout){
								setTimeout(()=>{
									uni.reLaunch({
										url:'../user/user'
									})
								},1000)
							}else{
								setTimeout(()=>{
									uni.navigateBack({
										delta:1
									})
								},1000)
							}
							
						}else{
							uni.showToast({
								title:res.data.msg,
								icon:'none',
								mask:true
							}) 
						}
				   }
			   })
//                 const data = {
//                     account: this.account,
//                     password: this.password
//                 };
//                 const validUser = service.getUsers().some(function (user) {
//                     return data.account === user.account && data.password === user.password;
//                 });
//                 if (validUser) {
//                     this.toMain(this.account);
//                 } else {
//                     uni.showToast({
//                         icon: 'none',
//                         title: '用户账号或密码不正确',
//                     });
//                 }
            },
            oauth(value) {
                uni.login({
                    provider: value,
                    success: (res) => {
                        uni.getUserInfo({
                            provider: value,
                            success: (infoRes) => {
                                /**
                                 * 实际开发中，获取用户信息后，需要将信息上报至服务端。
                                 * 服务端可以用 userInfo.openId 作为用户的唯一标识新增或绑定用户信息。
                                 */
                                this.toMain(infoRes.userInfo.nickName);
                            }
                        });
                    },
                    fail: (err) => {
                        console.error('授权登录失败：' + JSON.stringify(err));
                    }
                });
            },
            toMain(userName) {
                this.login(userName);
                /**
                 * 强制登录时使用reLaunch方式跳转过来
				 * 返回首页也使用reLaunch方式
                 */
                if (this.forcedLogin) {
                    uni.reLaunch({
                        url: '../main/main',
                    });
                } else {
                    uni.navigateBack();
                }

            }
        },
        onLoad(options) {
            this.initPosition();
            this.initProvider();
			this.logout = options.logout
			console.log(options);
        }
    }
</script>
